<template>
    <div class="common-aside">
	  <div class="logo">
		<img :src="$store.state.base.navCollapse ? require('../../../assets/imgs/222.jpg') : require('../../../assets/imgs/111.jpg')" alt="">
	  </div>
	  <el-menu
		router
		default-active="2"
		class="el-menu-vertical-demo"
		:collapse="$store.state.base.navCollapse">
	  <div v-for="nav in $store.state.permission.asideNavs" :key="nav.label">
        <el-menu-item :index="nav.path" v-if="!nav.children">
          <i :class="nav.icon"></i>
          <span slot="title">{{nav.label}}</span>
        </el-menu-item>
        <el-submenu :index="nav.label" v-if="nav.children">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span>{{nav.label}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="subNav in nav.children"
              :key="subNav.path"
              :index="subNav.path"
            >{{subNav.label}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        </div>
	  </el-menu>
    </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
	.common-aside{
		background-color: lightblue;
		height: 100vh;
		// overflow: hidden;
		.logo{
			width: 100%;
			height: 100px;
			// background-color: lightpink;
			img{
				margin: 10px auto;
				display: block;
				height: 100px;
			}

		}
		.el-menu{
			background-color: lightblue;
			color: #fff;
		}
    }
</style>
